import React from "react";
import {Col, FormGroup, Input, Row} from "reactstrap";

const Track = props => {
  const {value, id, collapse} = props

  return (
    <Row className="mt-2">
      <Col className="d-flex justify-content-center">
        <FormGroup>
          <Input
            type="text"
            value={value.name || ''}
            id={`name-${id}`}
            name={`name-${id}`}
            className="colored-input"
            disabled
          />
        </FormGroup>
      </Col>
      <Col>
        {
          value.track_composer && value.track_composer.map((composer, idc) => {
            return (
              <Row key={idc}>
                <Col className="d-flex justify-content-center align-items-center">
                  <FormGroup className="mr-1">
                    <Input
                      type="text"
                      value={composer || ''}
                      id={`track-composer-${idc}-${id}`}
                      name={`track-composer-${idc}-${id}`}
                      className="colored-input"
                      disabled
                    />
                  </FormGroup>
                </Col>
              </Row>
            )
          })
        }
      </Col>
      <Col>
        {
          value.text_composer && value.text_composer.map((text, idc) => {
            return (
              <Row key={idc}>
                <Col className="d-flex justify-content-center align-items-center">
                  <FormGroup className="mr-1">
                    <Input
                      type="text"
                      value={text || ''}
                      id={`text-composer-${idc}-${id}`}
                      name={`text-composer-${idc}-${id}`}
                      className="colored-input"
                      disabled
                    />
                  </FormGroup>
                </Col>
              </Row>
            )
          })
        }
      </Col>
      <Col>
        {
          value.together_with && value.together_with.map((together_with, idc) => {
            return (
              <Row key={idc}>
                <Col className="d-flex justify-content-center align-items-center">
                  <FormGroup className="mr-1">
                    <Input
                      type="text"
                      value={together_with || ''}
                      id={`together_with-${idc}-${id}`}
                      name={`together_with-${idc}-${id}`}
                      disabled
                    />
                  </FormGroup>
                </Col>
              </Row>
            )
          })
        }
      </Col>
    </Row>
  )
}

export default Track;
